<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据表格</title>
    <script src="../js/jquery-1.8.3.js"></script>
    <script src="../js/easyui/jquery.easyui.min.js"></script>
    <script src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" href="../js/easyui/themes/icon.css">
    <script type="text/javascript">
        $(function () {
            $("#grid").datagrid({
                //列头
                columns: [[
                    {
                        fild: "id",
                        titl: "编号",
                        width: 100
                    }
                    ,
                    {
                        fild: "name",
                        titl: "商品名称",
                        width: 100
                    },
                    {
                        fild: "priced",
                        titl: "商品价格",
                        width: 100
                    }
                ]],
                //数据
                url: "product.json",
                //分页
                pagination: true,
                //按钮
                toolbar: [
                    {
                        id: "saveBtn ",
                        text: "保存",
                        iconCls: "icon-save",
                        handler: function () {
                            alert("保存...");
                        }
                    }
                ]
            })
            ;
        });
    </script>

</head>
<body>
<!--数据表格-->
<table id="grid">

</table>
</body>
</html>